import React, { useEffect, useState } from 'react'

import * as qs from 'qs'
import request from 'utils/request'

import { Search } from './Components/Search/Search'
import { TableList } from './Components/TableList/TableList'
import { cleanObj, useDebounce, useMount } from 'utils/tools'

export const ProjectList = () => {
  // 下拉框负责人id及名字
  const [param, setParam] = useState({
    name: '',
    userId: ''
  })

  // 查询输入框负责人id及名字
  const [user, setUser] = useState([])

  // 获取所有负责人名单
  useMount(() => {
    ;(async function () {
      let res = await request.get('/user')
      setUser(res.data)
    })()
  })

  const [project, setProject] = useState([])

  //防抖处理自定义hook
  const debouncedParam = useDebounce(param, 200)
  useEffect(() => {
    ;(async function () {
      let res = await request.get(`/project?${qs.stringify(cleanObj(debouncedParam))}`)
      setProject(res.data)
    })()
  }, [debouncedParam])

  return (
    <>
      <Search param={param} setParam={setParam} user={user}></Search>
      <TableList user={user} project={project}></TableList>
    </>
  )
}
